<template>
    <h3>组件的生命周期函数应用</h3>
    <p ref="name">非典型性程序猿</p>
    <ul>
        <li v-for="(item, index) of banner">
            <h3>{{ item.title }}</h3>
            <p>{{ item.content }}</p>
        </li>
    </ul>
</template>

<script>

export default {
    data() {
        return {
            banner: []
        }
    },
    created() {
        // 模拟网络请求
        // 不能放在beforeCreate（组件创建之前），因为组件在创建之前还没有初始化data()中的变量，所以读不到this.banner变量
        // 进行默认网络请求最好放在mounted（组件挂载之后），可以先渲染完成页面结构，再加载数据
        this.banner = [
            {
                "title": "我在爱尔兰",
                "content": "爱尔兰（爱尔兰语：Éirinn，英语：Ireland），位于欧洲西部的爱尔兰岛中南部。西濒大西洋，东北与北爱尔兰接壤，东隔爱尔兰海同大不列颠岛相望。海岸线长3169千米。温带海洋性气候。平均气温2月3.2℃，8月16.2℃，面积7万平方千米。全国分为26个郡、3个郡级市和2个市郡，首都为都柏林。截至2022年4月，爱尔兰人口510万。"
            },
            {
                "title": "一个人在东京",
                "content": "东京（日语：东京；英语：Tokyo），日本首都 [1] [40] ，全球最富裕城市名单第2名， [41] 日本三大都市圈之一东京都市圈的中心城市。"
            },
            {
                "title": "普罗旺斯的梦",
                "content": "普罗旺斯（Provence）位于法国的南部。最初的普罗旺斯北起阿尔卑斯山，南到比利牛斯山脉，包括法国的整个南部区域。埃克斯市Aix-en-Provence是画家保尔·塞尚的故乡，自中世纪起就是一座大学城，也是著名的\"泉城\"。这里是罗马普罗旺斯的古都。"
            },
            {
                "title": "相约夏威夷之夏",
                "content": "夏威夷州(Hawaii State)是美国唯一的群岛州，由太平洋中部的132个岛屿组成。首府位于瓦胡岛上的火奴鲁鲁（檀香山）。"
            }
        ]
    },
    beforeMount() {
        // 在挂载前读不到系统的DOM结构，这里读到的是undefined
        console.log(this.$refs.name);
    },
    mounted() {
        // 在挂载后可以读取到DOM结构
        console.log(this.$refs.name);
    }
}
</script>
